<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">

    <div class="layui-card-body padding-left-40">
		
        <div class="layui-form-item">
            <label class="relative block">
                <span class="color-green font-w7">签名样式名</span>
                <span class="color-desc margin-left-5"></span>
                <input name="sigtitle" id="sigtitle" value='' required pattern="^.{1,}$" placeholder="请输入签名样式名" class="layui-input">
            </label>
            <p class="help-block"></p>
        </div>	
		
		
		
        <div class="layui-form-item">
			<div style="width:600px;height:250px;border:1px;border-style:solid; border-color:#ff0000;" id="signature3" class="js-signature" >
			</div>
			<p>
<button type="button" class="layui-btn layui-btn-sm" onclick="$('#signature3').jSignature('clear')">清除</button>
<!-- <button type="button" class="btn btn-default" onclick="alert($('#signature3').jSignature('getData', 'base30'))">导出</button> -->


<button type="button"  class="layui-btn layui-btn-sm layui-btn-normal" onclick="importImg($('#signature3'))">保存签名</button>


<!-- <div id="color" onclick="setcolor()">设置颜色</div>  -->
<!-- <button type="button" class="btn btn-default" onclick="importData($('#signature3'))">Import Data to Canvas</button> -->

			<input type="hidden" name="signaturepic" id="signaturepic" class="layui-input" value="">
			<input type="hidden" name="mycolor" id="mycolor" class="layui-input" value="#0e0e0e">
				
			
			<div  style="display:none">查看原来的签名</div>
			</p>
		</div>
	
	
	
        <div class="layui-form-item" style="display:none">
            <label class="relative block">
                <span class="color-green font-w7">上传签名图片</span>
                <span class="color-desc margin-left-5"></span>
					<div class="layui-upload">
					  <button type="button" class="layui-btn layui-btn-sm" id="test1">上传图片</button>
					  &nbsp;&nbsp;
					  <button type="button" class="layui-btn layui-btn-sm" id="crop">裁剪签名</button>
					  <div class="layui-upload-list">
						<img class="layui-upload-img" id="demo1" width="120" height="120">
						<p id="demoText"></p>
						<input name="pic" id="pic" value='' class="layui-input">
					  </div>
					</div>   
            </label>
            <p class="help-block"></p>
        </div>	
		
	
	
	
	
	
	
	
	
	
	
		<div class="layui-form-item">
		<table class="layui-table">
		  <thead>
			<tr><th>签名样式名</th>
			<th>设置日期</th>
			<th>样式</th>
			<th>操作</th>
		  </tr></thead>
		  <tbody id="demoList">
		  {foreach $rss as $key=>$v}
		  <tr id="upload-{$v.id}"><td>{$v.sigtitle}</td>
		  <td>{$v.addtime|format_datetime='Y-m-d H:i'}</td>
		  <td>
		  <span class="color-green viewsig" id="viewsig" data-id="{$v.id}" data-url="{$v.sigurl}" onclick="return getpic('{$v.sigurl}')">查看</span>
		  </td>		  
		  <td> 
		  <a class="color-green delsig" id="delsig" data-id="{$v.id}" data-url="{$v.sigurl}" onclick="return delsig('{$v.id}')">删除</a>
		  </td>  <tr>
		  {/foreach}
		  </tbody>
		</table>

		
		<!--<div id="signature">
				<span class="color-green font-w7">{if $vo.signatureurl !=''}<div id="oldsig">点击查看原来的签名</div>{/if}</span>
			</div>
		-->
        </div>

    </div>

    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' id="id" name='id'>{/notempty}

    <div class="layui-form-item text-center">
        <!-- <button class="layui-btn" type='submit'>保存数据</button> -->
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>关闭</button>
    </div>

</form>
{block name='script'}


<!-- <script>window.jQuery || document.write('<script src="__ROOT__/static/admin.js"><\/script>')</script> -->
<!-- <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> -->
<script src="__ROOT__/static/plugs/signature/jSignature.js.php"></script>
<script src="__ROOT__/static/plugs/signature/jSignature.CompressorBase30.js.php"></script>
<!-- <script src="__ROOT__/static/plugs/signature/jq-signature-.js"></script> -->

  <script src="__ROOT__/static/plugs/jcrop/jcrop.js"></script>
  <link href="__ROOT__/static/plugs/jcrop/jcrop.css" rel="stylesheet">
	<script src="http://edge1v.tapmodo.com/deepliq/jcrop_demos.js"></script>


<script type="text/javascript">


  $('#doldsig').on('click',function(){
		var img = "<img src='{$vo.signatureurl}' widht=450 height=280 />";
		layer.open({
		  type:1,
		  shift: 2,
		  shade:0,
		  area: ['685px', '300px'],
		  title:'查看签名',
		  shadeClose:true,
		  content:img
		});
	});
	
  $('#crop').on('click',function(){
		var pic=$("#pic").val();
		if(pic ==''){
			layer.msg("请先上传图片");
			return false;
		}
		var img = "<img src='"+pic+"' />";
		layer.open({
		  type:1,
		  shift: 2,
		  shade:0,
		  area: ['685px', '300px'],
		  title:'查看签名',
		  shadeClose:true,
		  content:img
		});
	});
	
	

function getpic(pic)
{
		var url =pic;
		var img = "<img src='"+url+"' widht=400 height=280 />";
		layer.open({
		  type:1,
		  shift: 2,
		  shade:0,
		  area: ['685px', '300px'],
		  title:'查看签名',
		  shadeClose:true,
		  content:img
		});
}


function delsig(id)
{

		$.post("{:url("delsig")}",{id:id},function(res){
			if(res.code =='0'){	
				alert(res.info);
				layer.msg(res.info);
				location.reload();
				//location.reload();
				//alert(msg);
				//alert("Drag");
				//$(this).navtab('reload');
				//revertFunc();
			}else{
				layer.msg('操作失败');
			}
		});
}


function setcolor()
{

	var precolor;
	
	layui.use('colorpicker', function(){
		  var $ = layui.$
		  ,colorpicker = layui.colorpicker;
		  layui.colorpicker.render({
			elem: '#color' //绑定元素
			,color: '#5fb878'
			,predefine: true // 开启预定义颜色
			,done: function(color){ //颜色改变的回调
				
			  /*layer.tips('选择了：'+ color, this.elem, {
				tips: 1
			  });*/
			  
			  $("#mycolor").attr('value' , color );
			  precolor =color;
			  var data = $("#signature3").data();
			  console.log(data)
			  //data["plugin_jqSignature"]["settings"]["lineColor"] = precolor;
			  $("#signature3").jSignature({color:precolor});
			  alert(precolor);
			}
		  });
		  
	 });
}


	layui.use(['colorpicker','upload'], function(){
		  var $ = layui.$
		  ,colorpicker = layui.colorpicker
		  ,upload = layui.upload;
		  
		  
		  var uploadInst = upload.render({
			elem: '#test1'
			,url: '{:url('upload')}'
			,before: function(obj){
			  //预读本地文件示例，不支持ie8
			  obj.preview(function(index, file, result){
				$('#demo1').attr('src', result); //图片链接（base64）
			  });
			}
			,done: function(res){
			   $("#pic").val(res.save_path);
			   console.log(res)
			  //如果上传失败
			  if(res.code > 0){
				return layer.msg('上传失败');
			  }
			  //上传成功
			}
			,error: function(){
			  //演示失败状态，并实现重传
			  var demoText = $('#demoText');
			  demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			  demoText.find('.demo-reload').on('click', function(){
				uploadInst.upload();
			  });
			}
		  });
		  
		  layui.colorpicker.render({
			elem: '#color' //绑定元素
			,color: '#5fb878'
			,predefine: true // 开启预定义颜色
			,done: function(color){ //颜色改变的回调
				
			  /*layer.tips('选择了：'+ color, this.elem, {
				tips: 1
			  });*/
			  
			  $("#mycolor").attr('value' , color );
			  precolor =color;
			  var data = $("#signature3").data();
			  console.log(data)
			  //data["plugin_jqSignature"]["settings"]["lineColor"] = precolor;
			  $("#signature3").jSignature({color:precolor});
			  alert(precolor);
			}
		  });
		  
	 });



$(document).ready(function() {
	// Prevent default for touch devices

	 $("#signature3").jSignature({color:'#0d0d0d',lineWidth:5,width:600,height:250});
	 
	 //alert($("#mycolor").val());

	//$("#signature3").jSignature({"color":$("#mycolor").val(),"lineWidth":5,"width":600,"height":250});

});




function importImg(sig)
{
	//alert(sig.jSignature('getData'));
	$("#signaturepic").attr('value' ,sig.jSignature('getData'));
	
	var signatureurl =$("#signaturepic").val();
	var sigtitle =$("#sigtitle").val();
	if (sigtitle ==''){
		layer.msg('请输入签名样式名');
		return false;
	}
	
	var id =$("#id").val();
	//alert(signatureurl);
	$.post("{:url("savesig")}",{id:id,signatureurl:signatureurl,sigtitle:sigtitle},function(res){
		//console.log(res);
		if(res.code =='0'){	
			alert(res.info);
			layer.msg(res.info);
			location.reload();
			//location.reload();
			//alert(msg);
			//alert("Drag");
			//$(this).navtab('reload');
			//revertFunc();
		}else{
			layer.msg('保存失败');
		}
	});	
	//sig.children("img.imported").remove();
	//$("<img class='imported' height='180' width='105'></img>").attr("src",sig.jSignature('getData')).appendTo(sig);
}



function importData(sig)
{
	var dataurl=window.prompt("Paste the exported Image data string here to put it back on this canvas","");
	if ($.trim(dataurl)) {
		sig.jSignature('importData',dataurl);
	}
}
</script>
{/block}